<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>MetalSynth</title>

		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="174x174"
			href="./favicon.png"
		/>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
		<link
			href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
			rel="stylesheet"
		/>
		<script src="../build/Tone.js"></script>
		<script src="./js/tone-ui.js"></script>
		<script src="./js/components.js"></script>
	</head>
	<body>
		<tone-example label="Bembe">
			<div slot="explanation">
				<a
					href="https://tonejs.github.io/docs/latest/classes/MetalSynth"
					>Tone.MetalSynth</a
				>
				creates metallic, inharmonic sounds using 6
				<a
					href="https://tonejs.github.io/docs/latest/classes/FMOscillator"
					>Tone.FMOscillators</a
				>
				with a tuning based on the TR-808 Cymbal.
				<a
					href="https://tonejs.github.io/docs/latest/classes/MembraneSynth"
					>Tone.MembraneSynth</a
				>
				makes kick and tom-like sounds using a frequency envelope which
				is triggered on notes attack.
			</div>

			<div id="content">
				<tone-play-toggle></tone-play-toggle>
			</div>
		</tone-example>

		<script type="text/javascript">
			const bell = new Tone.MetalSynth({
				harmonicity: 12,
				resonance: 800,
				modulationIndex: 20,
				envelope: {
					decay: 0.4,
				},
				volume: -15,
			}).toDestination();

			const bellPart = new Tone.Sequence(
				(time, freq) => {
					bell.triggerAttack(freq, time, Math.random() * 0.5 + 0.5);
				},
				[
					[300, null, 200],
					[null, 200, 200],
					[null, 200, null],
					[200, null, 200],
				],
				"4n"
			).start(0);

			const conga = new Tone.MembraneSynth({
				pitchDecay: 0.008,
				octaves: 2,
				envelope: {
					attack: 0.0006,
					decay: 0.5,
					sustain: 0,
				},
			}).toDestination();

			const congaPart = new Tone.Sequence(
				(time, pitch) => {
					conga.triggerAttack(pitch, time, Math.random() * 0.5 + 0.5);
				},
				["G3", "C4", "C4", "C4"],
				"4n"
			).start(0);

			Tone.Transport.bpm.value = 115;

			drawer()
				.add({
					tone: conga,
					title: "Conga",
				})
				.add({
					tone: bell,
					title: "Bell",
				});

			// connect the UI with the components
			document
				.querySelector("tone-play-toggle")
				.addEventListener("start", () => Tone.Transport.start());
			document
				.querySelector("tone-play-toggle")
				.addEventListener("stop", () => Tone.Transport.stop());
		</script>
	</body>
</html>
